<template>
    <el-container>
        <el-aside :width="200">
            <!-- 侧边 -->
            <el-menu
                :default-active="meniIndex"
                class="el-menu-vertical-demo"
                router
                :collapse="isCollapse"
                mode="vertical"
            >
                <el-menu-item index="1" :route="{path:'/home'}">
                    <i class="el-icon-eleme"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" :route="{path:'/kami'}">
                    <i class="el-icon-menu"></i>
                    <span slot="title" >卡密系统</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <el-main>
            <el-container>
                <el-header>

                    <el-row>
                        <el-col :span="2">
                            <div class="grid-content bg-purple">
                                <i class="el-icon-s-fold" @click="isCheck"></i>

                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div class="grid-content bg-purple"></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                
                            </div>
                        </el-col>
                    </el-row>

                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data(){
        return{
            meniIndex: '1',
            isCollapse:false
        }
    },
    methods:{
        isCheck (){
            this.isCollapse = !this.isCollapse
        }
    }
}
</script>

<style>
.el-menu-vertical-demo{
    /* width:0% */
}
</style>